Runhang Notes

#CSS

CSS Transition

简单，无浏览器前缀，但需要触发，不能自动重复

/*元素过渡只需要1S 动画只对height生效*/
 transition: 1s height;
 /*1S高度发生变化 随后宽度再变化*/
 transition: 1s height, 1s 1s width;

属性: 速度

/*在每一个动作后面加上ease选项控制加速度*/
transition: 1s height ease-in, 1s 1s width;
/*
linear 匀速
ease-in 加速
ease-out 减速
cubic-bezier函数：自定义速度模式 (http://cubic-bezier.com/) (下顿效果)
*/

##CSS Animation animation指向一个周期的动画需要用@keyframes定义动画内容

        @keyframes heartBeat {
            0% {    /*记录每个时段不同的动画内容*/
                width: 300px;
                height: 240px;
                transition: 1s height cubic-bezier(.8,1.53,.86,.1);
            }
            50% {
                width: 200px;
                height: 160px;
                transition: 1s height cubic-bezier(.8,1.53,.86,.1);
            }
            100% {
                width: 400px;
                height: 320px;
                transition: 1s height cubic-bezier(.8,1.53,.86,.1);
            }
        }
        .test{
            animation: 1s rainbow infinite;            
        }

属性: 速度同transition属性: 循环 infinite属性表示无限循环具体数字表示循环的次数 属性: 动画结束状态 none: 默认值回到起始状态 forwards: 停留在结束状态 backward: 回到第一帧的状态 both: 根据direction轮流应用forward 和backward 属性: 动画方向 ![](./_image/2016-07-08 10-53-20.jpg) 注意，normal 和 reverse 较常用，其他两个不常用，兼容性存疑 animation-play-state 动画停止时的状态默认回到初始状态

div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}
div:hover {
  animation-play-state: running;
}

##CSS transform 位置变化

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);		/* IE 9 */
-webkit-transform: rotate(30deg);	/* Safari and Chrome */
-o-transform: rotate(30deg);		/* Opera */
-moz-transform: rotate(30deg);		/* Firefox */
}

translate: transform: translate(50px,100px); 从当前位置地移动到left 50 top 100 位置 transform: rotate(30deg); 顺时针旋转30度，可以为负值 transform: scale(2,4); 横向放大2倍纵向放大4倍 transform: skew(30deg,20deg); 围绕x轴转30度围绕y轴转20度 transform:matrix(0.866,0.5,-0.5,0.866,0,0); 合并其他位置操作

#Web Animate API (http://www.w3cplus.com/animation/web-animation-api-from-entry-to-the-top.html) 核心句法: var player = Element.animate(frames, timing) frames 对应css中的Keyframe 同一个element可以同时加载多个动画

//js中改变状态的五种方法
player.pause(); //"paused"
player.play();  //"running"
player.cancel(); //"idle"
player.finish(); //"finished"
player.onfinish = function(frames, timing) {} //infinite 动画没有自然结束的时候

###时间轴 startTime currentTime = delay + (duration * iterations) 是个读写属性，可以定义

//时间控制
var player = element.animate(/* ... */);
console.log(player.playbackRate); //1
player.playbackRate = 2; //加速， 设置成－1减速
// 加减速不会影响currentTime 减少的是duration

###群组动画

单独定义利用timing中的 delay 和 duration 属性，对单一或多个元素进行控制
Group Effect KeyframeEffect 同样可以定义动画，但是和animate的区别在于它只定义，不触发动画的触发需要以GroupEffect函数来进行

var elem = document.getElementById("animation");
var effect = new KeyframeEffect(elem, keyframes, timings);  // 定义单个动画
var effects = [effect1, effect2, effect3..];    //动画放进array
var group = new GroupEffect(effects);   // 生成GroupEfftec
document.timeline.play(group);      // 利用timeline来启动动画

Sequence Effect 于Group Effect 类似，区别在于group effect 是平行播放，而sequence effect 是顺序播放

如何获取一组节点?

var ms = Array.prototype.slice.call(document.querySelectorAll('[id^=m]'));

Motion Path

目前暂不支持除chrome外的浏览器 ##Compatibility WAAPI 目前只兼容Chrome 和 FireFox 但是可以通过引入针对Web Animation API的Polyfill库[https://github.com/web-animations/web-animations-js]，使得Safari，IE10+，X5都支持WAAPI

#SVG stand for Scalable Vector Graphics

<svg width="100" height="100">
    <circle />
    <rect />
    <ellipse />
    <line />
    <polyline />
    <path />
    <text></text>      //sometimes with defs
</svg>

###SMIL can make animating SVG 支持Chrome Safari WeChat Viwe 有待测试不支持IE

<set>
<animate>
<animateColor>  //animate可以实现 所以被废弃 
<animateTransform>
<animateMotion>
//example
<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马
        <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
        <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
</svg>

####参数详解

attributeName = “属性名”，如x, y, cx, cy，也可以是css属性如opacity
attributeType = “XML/CSS/auto” 默认auto 自动识别能力强如果百分百确认使用类型再使用
from/to/by (起始／结束／相对) = "<value>" || values = "<list>" 起始就是默认时可省略from to指绝对位置到哪儿去，by指相对位置再去哪儿，to和by必须有一个，同时出现时by自动失效使用values的时候，from to by 都失效，可定义多个点，如 “AttributeName = “x” values = 160, 40, 100” dur = “3s” 任意一个值写错了都没有动画效果
Begin || end begin 定义一组值如 begin = “3s; 5s; 1min” 表示3s走一下 5s走一下 1min的时候又走一下在单值情况下，begin 还可以定义“同步值”，如 begin=“id.end-1s” 表示在某个id行为结束前一秒开始 begin 还可以定义“动作”，如 begin=“test.click + 2s”，代表点击#test 元素触发 begin 还可以定义循环次数如 begin=“test.repeat(2) + 2s” 表示#test动画两次后触发 begin = ''indefinite" 表示无限等待，需要在js中控制

var test = document.getElementByTagName("animate")[0];
if(test){
    document.getElementById(test).onclick = function(){
        test.beginElement();
    };
}

dur dur = “3s” 动画持续3s 比begin／end简单多了
calMode, keyTime, keySplines
repeatCount, repeatDur
fill 动画间隙填充方式，有freeze 和 remove，表示停留当前状态和回到原位，默认remove
accumulate, addtive accumulate 表示累积，有none 和 sum， sum表示上次动画结束位置是下次动画起始位置，默认none addtive 表示附加，有replace 和 sum，sum表示基础动画会叠加在下一个动画上，默认replace
暂停与播放 test 表示当前svg 的dom元素 test.pauseAnimations(); 暂停动画 test.unpauseAnimations(); 重启动画

# CSS Transition

# Motion Path

CSS Transition

Motion Path